<template>
  <div class="settings-container">
    <div class="coffee-bg"></div>
    <el-card class="coffee-card">
      <div slot="header" class="settings-header">系统设置</div>
      <el-form :model="settings" label-width="100px" style="max-width: 500px">
        <el-form-item label="系统名称">
          <el-input v-model="settings.name" />
        </el-form-item>
        <el-form-item label="Logo">
          <el-upload
            class="logo-uploader"
            action=""
            :show-file-list="false"
            :before-upload="beforeLogoUpload"
            :on-change="handleLogoChange"
            accept="image/*"
          >
            <img v-if="settings.logo" :src="settings.logo" class="logo-img" />
            <el-button v-else>上传Logo</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="主题色">
          <el-color-picker v-model="settings.themeColor" />
        </el-form-item>
        <el-form-item label="营业时间">
          <div class="time-picker-wrapper">
            <el-time-picker
              v-model="settings.businessHours[0]"
              placeholder="开始时间"
              format="HH:mm"
              value-format="HH:mm"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
            />
            <span class="separator">至</span>
            <el-time-picker
              v-model="settings.businessHours[1]"
              placeholder="结束时间"
              format="HH:mm"
              value-format="HH:mm"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      settings: {
        name: '咖啡店管理系统',
        logo: '',
        themeColor: '#409EFF',
        businessHours: ['08:00', '22:00']
      }
    }
  },
  created() {
    const local = JSON.parse(localStorage.getItem('systemSettings') || 'null')
    if (local) this.settings = local
  },
  methods: {
    beforeLogoUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isImage) {
        this.$message.error('只能上传图片文件!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB!')
      }
      return isImage && isLt2M
    },
    handleLogoChange(file) {
      const reader = new FileReader()
      reader.onload = e => {
        this.settings.logo = e.target.result
      }
      reader.readAsDataURL(file.raw)
    },
    saveSettings() {
      localStorage.setItem('systemSettings', JSON.stringify(this.settings))
      this.$message.success('设置已保存')
    }
  }
}
</script>
<style scoped>
.settings-container {
  padding: 40px;
  min-height: 100vh;
  background: linear-gradient(135deg, #e7d2ba 0%, #b08968 100%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.coffee-bg {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/2615.png') repeat 0 0/120px auto;
  opacity: 0.06;
}
.coffee-card {
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(80, 60, 40, 0.10);
  border: 1px solid #e0c3a0;
  background: rgba(255, 255, 255, 0.97);
  min-width: 420px;
  max-width: 600px;
  width: 100%;
  z-index: 1;
}
.settings-header {
  font-size: 1.5em;
  color: #7c4f22;
  font-family: 'Segoe Script', 'Comic Sans MS', cursive, sans-serif;
  letter-spacing: 2px;
  text-align: center;
  padding: 8px 0;
}
.el-form {
  margin-top: 16px;
}
.el-form-item__label {
  color: #a47149;
  font-weight: bold;
}
.el-input__inner {
  background: #f8f5f2;
  border-radius: 8px;
  border: 1px solid #e0c3a0;
}
.el-button--primary {
  background: linear-gradient(90deg, #a47149 0%, #7c4f22 100%);
  border: none;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(124, 79, 34, 0.08);
  transition: background 0.2s;
}
.el-button--primary:hover {
  background: linear-gradient(90deg, #7c4f22 0%, #a47149 100%);
}
.logo-uploader .el-upload {
  border: none;
  background: none;
  padding: 0;
}
.logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e0c3a0;
  background: #f8f5f2;
  box-shadow: 0 2px 8px #b0896822;
}
.time-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.separator {
  color: #a47149;
  font-weight: bold;
}
</style> 